<template>
  <div class="a">
    <div class="iconw">
      <svg
        t="1668328718834"
        @click="$router.go(-1)"
        class="icon1"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3586"
        width="200"
        height="200"
      >
        <path
          d="M750.381737 221.002416 463.634967 511.525186l286.74677 290.511513c8.848529 8.875135 15.504112 19.020192 19.917632 30.41266 4.437056 11.366885 6.655584 22.933315 6.655584 34.649148 0 11.691273-2.218528 23.108301-6.655584 34.17638-4.41352 11.067057-11.06808 21.039175-19.917632 29.888727-17.749246 18.371416-38.937824 27.545356-63.641459 27.545356-24.653493 0-45.86663-9.17394-63.591317-27.545356L276.6012 581.77311c-8.875135-8.848529-15.829524-19.443841-20.889773-31.80845-5.060249-12.339026-7.927553-24.828478-8.525164-37.491892-0.648776-12.650111 0.921999-24.839735 4.735861-36.544311 3.789303-11.715833 10.121522-21.363564 18.995633-28.966729L623.148961 91.8755c17.699104-17.723663 38.937824-26.585495 63.591317-26.585495 24.704658 0 45.893236 8.861832 63.641459 26.585495 8.848529 8.861832 15.480576 18.98233 19.917632 30.374798s6.655584 22.946618 6.655584 34.662451c0 11.704576-2.218528 23.108301-6.655584 34.175357C765.885849 202.169489 759.230266 212.140585 750.381737 221.002416L750.381737 221.002416 750.381737 221.002416zM750.381737 221.002416"
          p-id="3587"
        ></path>
      </svg>
      <svg
        t="1668328701998"
        @click="$router.go(+1)"
        class="icon1"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2672"
        width="200"
        height="200"
      >
        <path
          d="M273.61724 221.002416 273.61724 221.002416c-8.848529-8.861832-15.504112-18.832927-19.917632-29.913287-4.437056-11.067057-6.655584-22.471804-6.655584-34.175357 0-11.715833 2.218528-23.269983 6.655584-34.662451s11.06808-21.511943 19.917632-30.374798c17.749246-17.723663 38.937824-26.585495 63.641459-26.585495 24.653493 0 45.892213 8.861832 63.591317 26.585495l352.232227 355.086228c8.874111 7.603165 15.205307 17.249873 18.995633 28.966729 3.813862 11.704576 5.384637 23.8942 4.735861 36.544311-0.597611 12.663414-3.464915 25.152866-8.525164 37.491892-5.060249 12.364609-12.014638 22.959921-20.889773 31.80845L400.850016 931.163615c-17.723663 18.371416-38.937824 27.545356-63.591317 27.545356-24.704658 0-45.893236-9.17394-63.641459-27.545356-8.848529-8.849552-15.504112-18.821671-19.917632-29.888727-4.437056-11.06808-6.655584-22.48613-6.655584-34.17638 0-11.715833 2.218528-23.282263 6.655584-34.649148 4.41352-11.392468 11.06808-21.537526 19.917632-30.41266l286.74677-290.511513L273.61724 221.002416 273.61724 221.002416zM273.61724 221.002416"
          p-id="2673"
        ></path>
      </svg>
    </div>
    <el-input
      class="b"
      v-model="aaa"
      color="pink"
      size="large"
      placeholder="请输入歌曲名称"
      style="width: 10%; height: 2.2em"
      @keyup.enter="sss"
    />
    <el-button
      type="primary"
      @click="sss"
      class="c"

      >搜索</el-button
    >
  </div>
  <el-row class="tac">
    <el-col :span="2">
      <h5 class="mb-2"></h5>
      <el-menu
        class="d"
        :router="true"
        active-text-color="red"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-menu-item index="/">
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="/c">
          <span>关于</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-main>
      <router-view></router-view>
    </el-main>
    <musicbf/>
    <div class="e">
    </div>
  </el-row>



</template>
  
<script>
import musicbfVue from "./components/item/musicbf.vue";
import { ref,onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import musicbf from './components/item/musicbf.vue';
import { useRoute, useRouter } from 'vue-router';
import { getSearch } from './request/api/home';

export default {
  components: { musicbf },
  setup() {
    const router=useRouter()
    const drawer = ref(false)
    const aaa = ref("");
    let bbb = ref([]);

    function sss(){
      
      router.push({
        path:"/search",
        query:{
          router:aaa.value
        }

      })



    }
    onMounted(async() => {
      let res=await getSearch();
      console.log(res);
    });
    return {aaa,bbb,sss,drawer}
  },
};
</script>
  <style>
/* *{
    padding: 0;
    margin: 0;
  } */
.a {
  width: 100%;
  height: 5%;
  background-color:#ec4141;
  margin-top: 0px;
  display: flex;
}
.b {
  margin-top: 0.5%;
  margin-left: 40%;
}
.c {
  margin-top: 0.5em;
}
.d {
  height:72em;
}
a {
  color: black;
}
.icon1 {
  width: 2em;
  height: 2em;
  margin-left: 1em;
  border: solid 1px;
}
.iconw {
  margin-left: 14em;
  margin-top: 0.5em;
}
.e {
  height: 7.1em;
  width: 100%;
}

</style>